import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '宝宝云母婴同城',
      theme: ThemeData(
        primarySwatch: Colors.pink,
        fontFamily: 'PingFang SC', // Use a Chinese-compatible font
      ),
      home: const ShopPage(),
    );
  }
}

class ShopPage extends StatelessWidget {
  const ShopPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0, // 移除阴影
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color.fromARGB(255, 242, 238, 202),
                Color.fromARGB(255, 254, 233, 241)
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
        ),
        title: Column(
          children: [
            Text("宝宝云母婴商城",
                style: TextStyle(
                  color: const Color.fromARGB(255, 86, 67, 58),
                  fontSize: 25,
                )),
            Text("正品保证 + 精选供应商",
                style: TextStyle(
                    color: const Color.fromARGB(255, 132, 113, 101),
                    fontSize: 14))
          ],
        ),
        // centerTitle: true,

        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {},
          ),
          IconButton(
            icon: const Icon(Icons.shopping_cart),
            onPressed: () {},
          ),
          IconButton(
            icon: const Icon(Icons.more_horiz),
            onPressed: () {},
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _buildCategoryGrid(),
            _buildPromotionBanner(context),
            _buildDiscountSection(),
            _buildProductGrid(),
          ],
        ),
      ),
    );
  }

  Widget _buildCategoryGrid() {
    final categories = [
      {'icon': Icons.child_care, 'name': '纸尿裤'},
      {'icon': Icons.fastfood, 'name': '零食辅食'},
      {'icon': Icons.baby_changing_station, 'name': '喂养用品'},
      {'icon': Icons.toys, 'name': '早教玩具'},
      {'icon': Icons.local_drink, 'name': '奶粉'},
      {'icon': Icons.checkroom, 'name': '童装棉品'},
      {'icon': Icons.bathtub, 'name': '宝宝洗护'},
      {'icon': Icons.face, 'name': '护肤美妆'},
      {'icon': Icons.health_and_safety, 'name': '宝宝营养'},
      {'icon': Icons.menu, 'name': '全部分类'},
    ];

    return Card(
        margin: const EdgeInsets.all(12), // 设置卡片外边距
        elevation: 2, // 设置卡片的阴影
        shadowColor: Colors.grey, // 设置阴影的颜色，有默认值，可以不设置
        shape: const RoundedRectangleBorder(
            // 设置卡片的圆角，想调整圆角弧度，可以设置
            borderRadius: BorderRadius.all(Radius.circular(10))),
        child: GridView.builder(
          padding: const EdgeInsets.all(16),
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 5,
            childAspectRatio: 0.8,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
          ),
          itemCount: categories.length,
          itemBuilder: (context, index) => Column(
            children: [
              CircleAvatar(
                radius: 24,
                backgroundColor: Colors.pink[100],
                child: Icon(categories[index]['icon'] as IconData,
                    color: Colors.pink),
              ),
              const SizedBox(height: 8),
              Text(
                categories[index]['name'] as String,
                style: const TextStyle(fontSize: 12),
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ));
  }

  Widget _buildPromotionBanner(context) {
    return ClipRRect(
      // 确保这是最外层组件
      borderRadius: BorderRadius.circular(12),
      child: Image.asset(
        '../../assets/images/kaixue.jpg',
        cacheWidth: (MediaQuery.of(context).size.width * 0.93).toInt(),
        fit: BoxFit.cover,
      ),
    );
  }

  Widget _buildDiscountSection() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(
                '限时折扣',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
              TextButton(
                onPressed: () {},
                child: const Text(
                  '查看更多 >',
                  style: TextStyle(color: Colors.pink),
                ),
              ),
            ],
          ),
          const SizedBox(height: 8),
          Row(
            children: [
              Expanded(
                child: Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: Colors.pink[50],
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: const Column(
                    children: [
                      Text(
                        '限时秒杀',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 4),
                      Text(
                        '0.5元',
                        style: TextStyle(
                          fontSize: 12,
                          color: Colors.red,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(width: 8),
              Expanded(
                child: Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: Colors.pink[50],
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: const Column(
                    children: [
                      Text(
                        '限时秒杀',
                        style: TextStyle(
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 4),
                      Text(
                        '0.5元',
                        style: TextStyle(
                          fontSize: 12,
                          color: Colors.red,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildProductGrid() {
    final products = [
      {
        'name': '圣诞好礼...',
        'desc': '圣诞好礼 送朋友 送恋人...',
        'originalPrice': '￥59.9',
        'price': '￥19.9',
        'img': '../../../assets/images/chrimis.jpg'
      },
      {
        'name': '围巾...',
        'desc': '明星同款...',
        'originalPrice': '￥68.5',
        'price': '￥29.9',
        'img': '../../../assets/images/weijin.jpg'
      },
      {
        'name': '鼠标...',
        'desc': '职业选手专用...',
        'originalPrice': '￥68.5',
        'price': '￥29.9',
        'img': '../../../assets/images/mouse.jpg'
      },
      {
        'name': '杯子...',
        'desc': '大容量，易携带...',
        'originalPrice': '￥68.5',
        'price': '￥29.9',
        'img': '../../../assets/images/cup.jpg'
      },
    ];

    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(
                '爆款推荐',
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
              TextButton(
                onPressed: () {},
                child: const Text(
                  '查看更多 >',
                  style: TextStyle(color: Colors.pink),
                ),
              ),
            ],
          ),
          GridView.builder(
            shrinkWrap: true,
            // physics: const NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.7,
              mainAxisSpacing: 8,
              crossAxisSpacing: 8,
            ),
            itemCount: products.length,
            itemBuilder: (context, index) => Container(
              child: InkWell(
                onTap: () {
                  Navigator.pushNamed(context, '/productDetail',
                      arguments: products[index]);
                },
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 120,
                      color: Colors.grey[200],
                      child:
                          Center(child: Image.asset(products[index]['img']!)),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            products[index]['name']!,
                            style: const TextStyle(fontSize: 14),
                          ),
                          Text(
                            products[index]['desc']!,
                            style: TextStyle(
                              fontSize: 12,
                              color: Colors.grey[600],
                            ),
                          ),
                          const SizedBox(height: 8),
                          Row(
                            children: [
                              Text(
                                products[index]['price']!,
                                style: const TextStyle(
                                  fontSize: 16,
                                  color: Colors.pink,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              const SizedBox(width: 8),
                              Text(
                                products[index]['originalPrice']!,
                                style: TextStyle(
                                  fontSize: 12,
                                  color: Colors.grey[500],
                                  decoration: TextDecoration.lineThrough,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
